<!-- <template>
    <div class="">
        <div class="box p-6 mb-6">
            <h4>PPT</h4>
            <div>

                <iframe :src="'https://view.officeapps.live.com/op/view.aspx?src=' + url" width='100%' height='100%'
                    frameborder='1'>
                </iframe>



                <p>You will get only those email notification what you want.</p>
            </div>
        </div>
    </div>
</template>
<script setup>
import { onMounted } from 'vue';


</script> -->
<!-- 
<template>
    <div>
        <input type="text" v-model="pptUrl" placeholder="Enter PPTX URL" />
        <button @click="fetchPPTX">Load PPTX</button>

        <div v-if="slides.length">
            <div v-for="(slide, index) in slides" :key="index" class="slide">
                <div v-html="slide"></div>
            </div>
        </div>
    </div>
</template>

<script>
import axios from "axios";
import PPTXGenJS from "pptxgenjs";

export default {
    data() {
        return {
            pptUrl: "http://47.104.246.166:8888/assets/32/09/3209f325ce80822d0d69dff74015acfe1727227911181.ppt", // 用户输入的 PPTX 文件 URL  
            slides: [], // 用于存储 PPT 页的 HTML  
        };
    },
    methods: {
        async fetchPPTX() {
            // 下载 PPTX 文件  
            try {
                const response = await axios.get(this.pptUrl, {
                    responseType: 'arraybuffer' // 确保以数组缓冲区格式接收文件  
                });

                this.loadPPTX(response.data);
            } catch (error) {
                console.error("Error fetching PPTX file: ", error);
                alert("Failed to load PPTX file. Please check the URL.");
            }
        },

        loadPPTX(arrayBuffer) {
            const pptx = new PPTXGenJS();
            pptx.load(arrayBuffer).then((presentation) => {
                this.renderSlides(presentation);
            }).catch((error) => {
                console.error("Error loading PPTX file: ", error);
            });
        },

        renderSlides(presentation) {
            this.slides = [];

            for (let slide of presentation.slides) {
                const slideHtml = this.createSlideHTML(slide);
                this.slides.push(slideHtml);
            }
        },

        createSlideHTML(slide) {
            let html = `<div class="slide-title">${slide.title}</div>`;
            slide.objects.forEach(obj => {
                // 根据对象类型生成相应的 HTML  
                if (obj.type === 'text') {
                    html += `<p>${obj.text}</p>`;
                }
                // 添加其他类型的处理（例如图片、形状等）  
            });
            return html;
        }
    }
};
</script>
-->
<style>
#pptx {
    margin-right: auto;
    margin-left: auto;
    width: 900px;
}
</style>

<template>
    <div id="pptx"></div>
</template>
<script setup>
const pptxShow = (src) => {
    nextTick(() => {
        $("#pptx").pptxToHtml({
            pptxFileUrl: src, //pptx文件地址      
            // slidesScale: "100%",
            slideMode: true,
            slideModeConfig: {  //on slide mode (slideMode: true)
                first: 1,
                nav: true, /** true,false : show or not nav buttons*/
                navTxtColor: "white", /** color */
                navNextTxt: "&#8250;", //">"
                navPrevTxt: "&#8249;", //"<"
                showPlayPauseBtn: true,/** true,false */
                keyBoardShortCut: true, /** true,false */
                showSlideNum: true, /** true,false */
                showTotalSlideNum: true, /** true,false */
                autoSlide: false, /** false or seconds (the pause time between slides) , F8 to active(keyBoardShortCut: true) */
                randomAutoSlide: false, /** true,false ,autoSlide:true */
                loop: false,  /** true,false */
                background: "black", /** false or color*/
                transition: "default", /** transition type: "slid","fade","default","random" , to show transition efects :transitionTime > 0.5 */
                transitionTime: 1 /** transition time in seconds */
            }
        });
    });
}

// const url = encodeURIComponent('http://47.104.246.166:8888/assets/32/09/3209f325ce80822d0d69dff74015acfe1727227911181.ppt')
// onMounted(() => {
//     window.open("​http://view.officeapps.live.com/op/view.aspx?src=" + url)
// })

pptxShow('http://47.104.246.166:8888/assets/32/09/3209f325ce80822d0d69dff74015acfe1727227911181.ppt')
</script>